<template>
  <div class="videoContainer">
    <div class="dataAllContainer">
      <div class="leftContainer">
        <div class="title">筛选器</div>
        <div
          id="main"
          style="height: calc(100vh - 410px); width: 500px; overflow-y: scroll"
        >
          <el-tree
            highlight-current
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </div>
      <div class="centerContainer"></div>
      <div class="rightContainer">
        <div class="title">设备列表</div>
        <div id="main">
          <el-table
            ref="tableRef"
            :data="tableData"
            highlight-current-row
            current-row-key="id"
            height="calc(100vh - 425px)"
            border
            style="width: 100%"
            @row-click="rowClick"
          >
            <el-table-column label="序列号" type="index" width="110">
            </el-table-column>
            <el-table-column
              prop="actionNo"
              show-overflow-tooltip
              label="型号"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              show-overflow-tooltip
              label="状态"
              width="180"
            >
              <template slot-scope="scope">
                {{ status[scope.row.status - 1] }}
              </template>
            </el-table-column>
            <el-table-column prop="address" show-overflow-tooltip label="地址">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 图形 -->
    <div style="display: flex">
      <div style="flex: 1">
        <div class="title">当前温度</div>
        <div id="main1" style="height: 300px; width: 100%"></div>
      </div>
      <div style="flex: 1">
        <div class="title">当前湿度</div>
        <div id="main2" style="height: 300px; width: 100%"></div>
      </div>
      <div style="flex: 2">
        <div id="main3" style="height: 300px; width: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { addressList, deviceLists, warningLists } from "@/api/index.js";
export default {
  name: "VideoMonitor",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      status: ["正常运行", "使用中", "故障中", "异常中"],
      tableData: [],
    };
  },
  props: {
    prop: {
      type: String,
      required: false,
    },
  },
  components: {},
  computed: {},
  watch: {},
  methods: {
    rowClick(row, column, event) {
      this.getTuData(row.id);
    },
    drawChart(data) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = echarts.init(document.getElementById("main1"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          formatter: "{b} : {c}°C",
        },
        series: [
          {
            name: "",
            type: "gauge",
            detail: {
              formatter: "{value}",
            },
            data: [
              {
                value: data,
                name: "温度",
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    drawChart2(data) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = echarts.init(document.getElementById("main2"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          formatter: "{b} : {c}%",
        },
        series: [
          {
            name: "",
            type: "gauge",
            detail: {
              formatter: "{value}",
            },
            data: [
              {
                value: data,
                name: "湿度",
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    drawChart3(times, data1, data2) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = echarts.init(document.getElementById("main3"));
      // 指定图表的配置项和数据
      let option = {
        // title: {
        //   text: "Stacked Line",
        // },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["温度", "湿度"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          nameTextStyle: {
            color: "#fff",
          },
          data: times,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "温度",
            type: "line",
            stack: "Total",
            data: data1,
          },
          {
            name: "湿度",
            type: "line",
            stack: "Total",
            data: data2,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    handleNodeClick(data) {
      console.log(data);
      this.getDevice(data.id);
    },
    getDevice(data) {
      deviceLists(data).then((res) => {
        this.tableData = res;
        if (res && res.length > 0) {
          this.$refs.tableRef.setCurrentRow(res[0]);
          this.getTuData(res[0].id);
        }
      });
    },
    // 图形数据
    getTuData(data) {
      warningLists(data).then((res) => {
        console.log(res);
        this.drawChart(res.heat);
        this.drawChart2(res.humidity);
        this.drawChart3(res.times, res.heats, res.humidities);
      });
    },
    getList() {
      addressList({}).then((res) => {
        this.data = res;
      });
    },
  },
  created() {},
  mounted() {
    this.getDevice(0);
    this.getList();
  },
  updated() {},
  destroyed() {},
  filters: {},
};
</script>

<style scoped lang="scss">
.title {
  color: #fff;
  text-align: center;
}
.dataAllContainer {
  display: flex;

  #main {
    border: 2px solid #003a78;
    border-radius: 5px;
    padding: 5px;
    background-color: #fff;
  }
  .leftContainer {
    width: 500px;
    margin-right: 10px;
    margin-left: 5px;
  }
  .rightContainer {
    width: calc(100vw - 520px);
  }
}
</style>
